<div class="page-bar">
    <ul class="page-breadcrumb">
        <li>
            <a href="#">Inventory</a>
            <i class="fa fa-circle"></i>
        </li>
        <li>
            <a href="#">Report List</a>
        </li>
    </ul>
</div>
<div class="portlet light bordered order-list-container" style="margin: 15px;">
    <div class="portlet-title">
        <div class="caption">
            <span class="caption-subject bold"> Report List </span>
        </div>
        <div class="actions">
            <a ui-sref="inventory.report.add"  permission-check="{{'inventory::report_write'}}"><b>Add Report</b></a>
        </div>
    </div>
    <div class="portlet-body form form-horizontal">
        <form name="editForm" class="form-horizontal">
            <div class="row">
                <div class="col-md-6">
                    <div class="form-group">
                        <div class="col-md-6">
                            <label>Customer:</label>
                            <organization-auto-complete name="customer" ng-model="search.customerId" tag="Customer" allow-clear="true"></organization-auto-complete>
                        </div>
                        <div class="col-md-6">
                            <label>Status</label>
                            <ui-select name="statuses" multiple  ng-model="search.statuses">
                                <ui-select-match>
                                    {{$item}}
                                </ui-select-match>
                                <ui-select-choices repeat="item in ['New', 'Running', 'Done','Exception']| filter: $select.search">
                                    {{item}}
                                </ui-select-choices>
                            </ui-select>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-6">
                            <label>Title:</label>
                            <organization-auto-complete name="title" ng-model="search.titleId" tag="Title" allow-clear="true"></organization-auto-complete>
                        </div>
                        <div class="col-md-6">
                            <label>Supplier:</label>
                            <organization-auto-complete ng-model="search.supplierId" name="supplier" tag="Supplier"  allow-clear="true"></organization-auto-complete>
                        </div>
                    </div>
                    <div class="form-group" ng-show="search.type == 'Inventory'">
                        <div class="col-md-6">
                            <label >Inventory Date From:</label>
                            <lt-date-time  value="search.endTimeFrom" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                        <div class="col-md-6">
                            <label >Inventory Date End:</label>
                            <lt-date-time  value="search.endTimeTo" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                    </div>
                    <div class="form-group" ng-show="search.type=='Inbound' || search.type == 'Outbound'">
                        <div class="col-md-6">
                            <label >Start {{timeName}} Date From:</label>
                            <lt-date-time  value="search.startTimeFrom" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                        <div class="col-md-6">
                            <label >Start {{timeName}} Date End:</label>
                            <lt-date-time  value="search.startTimeTo" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                    </div>
                    <div class="form-group" ng-show="search.type=='Inbound' || search.type == 'Outbound'">
                        <div class="col-md-6">
                            <label >End {{timeName}} Date From:</label>
                            <lt-date-time  value="search.endTimeFrom" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                        <div class="col-md-6">
                            <label >End {{timeName}} Date End:</label>
                            <lt-date-time  value="search.endTimeTo" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                    </div>

                    <div class="form-group" ng-show="search.type == 'Outbound'">
                        <div class="col-md-6">
                            <label >Start Schedule Date From:</label>
                            <lt-date-time  value="search.startScheduleTimeFrom" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                        <div class="col-md-6">
                            <label >Start Schedule Date End:</label>
                            <lt-date-time  value="search.startScheduleTimeTo" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                    </div>
                    <div class="form-group" ng-show="search.type == 'Outbound'">
                        <div class="col-md-6">
                            <label >End Schedule Date From:</label>
                            <lt-date-time  value="search.endScheduleTimeFrom" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                        <div class="col-md-6">
                            <label >End Schedule Date End:</label>
                            <lt-date-time  value="search.endScheduleTimeTo" date-format="yyyy-mm-dd" min-view="2"></lt-date-time>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <div class="col-md-6">
                            <label>Report Type</label>
                            <ui-select name="search.type" ng-model="search.type" on-select="typeOnSelect(search.type)">
                                <ui-select-match allow-clear="true">
                                    <div ng-bind="$select.selected"></div>
                                </ui-select-match>
                                <ui-select-choices repeat="item in ['Inbound_schedule', 'Inbound_finished', 'Outbound_schedule','Outbound_finished','Inventory',]">
                                    <div ng-bind="item"></div>
                                </ui-select-choices>
                            </ui-select>
                        </div>
                    </div>
                    <div class="form-group" ng-show="search.type != 'Inventory'">
                        <div class="col-md-12">
                            <label>Item:</label>
                            <itemspec-auto-complete ng-model="search.itemSpecId"  name="itemSpec"  customer-id="search.customerId"
                                                    on-select="itemSpecIdOnSelect(search.itemSpecId)"  allow-clear="true"/>
                        </div>
                    </div>
                    <div ng-show="(search.type != 'Inventory') && diverseFields && diverseFields.length>0"
                         style="background-color: rgba(93, 204, 214, 0.188235); padding:15px 25px 5px 5px; margin-bottom: 15px; margin-right:-15px;">
                        <div class="form-group" ng-switch on="field.itemProperty.type" ng-repeat="field in diverseFields">
                            <label class="control-label col-md-3">{{field.itemProperty.name}}:</label>
                            <div class="col-md-9">
                                <input-validation-message field="field.{{$index}}.value" form="addItemLineForm"></input-validation-message>
                                <ui-select name="field.{{$index}}.value" ng-model="field.selectedProduct"
                                           ng-show="field.availableDiverseValues && field.availableDiverseValues.length>0"
                                           on-select="diverseValuesSelected(field)">
                                    <ui-select-match allow-clear="true">
                                        <div>{{$select.selected.value}} {{$select.selected.unit}}</div>
                                    </ui-select-match>
                                    <ui-select-choices repeat="diverseObj in field.availableDiverseValues">
                                        <div>{{diverseObj.value}} {{diverseObj.unit}}</div>
                                    </ui-select-choices>
                                </ui-select>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
            <div class="form-group form-actions right" style="padding: 0px;">
                <button type="submit" class="btn blue" style="float:right;" ng-click="searchReports()">Search</button>
            </div>
        </form>
        <div ng-show="!searchCompleted" class="text-center">
            <img src="assets/img/loading-spinner-grey.gif"><span>&nbsp;LOADING...</span>
        </div>
        <div ng-show="searchCompleted" class="tabbable-custom" style="margin-top: 15px;">
                <div  class="table-scrollable">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>Status</th>
                            <th>Type</th>
                            <th>Customer</th>
                            <th>Title</th>
                            <th>Supplier</th>
                            <th>Item</th>
                            <th>CreatedBy</th>
                            <th>Start {{timeName}} Date</th>
                            <th>End {{timeName}} Date</th>
                            <th>Created Time</th>
                            <th width="180px;">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="report in reportView">
                                <td>{{report.status}}</td>
                                <td>{{report.type}}</td>
                                <td>{{report.customerName}}</td>
                                <td>{{report.titleName}}</td>
                                <td>{{report.supplierName}}</td>
                                <td><item-display item="itemMap[report.itemSpecId]"></item-display></td>
                                <td>{{report.createdBy}}</td>
                                <td>{{report.startTime | amDateFormat:'YYYY-MM-DD'}}</td>
                                <td>{{report.endTime | amDateFormat:'YYYY-MM-DD'}}</td>
                                <td>{{report.createdWhen | amDateFormat:'YYYY-MM-DD HH:mm:ss'}}</td>
                                <td>
                                    <a type="button" class="btn blue left" ng-click="deleteReport(report.id)"
                                       permission-check="{{'inventory::report_write'}}" title="Delete">Delete</a>
                                    <a http-src="/file-app/file-download/{{report.fileId}}" ng-click="getDownload(report)" download="{{download}}"
                                        ng-show="report.status == 'Done'"
                                        type="button"
                                        class="demo-loading-btn btn red">
                                           Download
                                    </a>

                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <pager total-count="reports.length" page-size="pageSize"  load-content="loadContent(currentPage)"></pager>
            </div>
    </div>
</div>